<script setup>
import { provide, ref, watch } from "vue";

const props = defineProps(["value"]);
const emit = defineEmits(["change"]);
const groupValue = ref(props.value);

function groupChanged(name) {
  groupValue.value = name;
  emit("change", name);
}

watch(() => props.value, newValue => {
  groupValue.value = newValue;
});

provide("radioGroupChanged", groupChanged);
provide("radioGroupValue", groupValue);
</script>

<template>
  <ul>
    <slot></slot>
  </ul>
</template>
